<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-font.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-mui-numbox.css"/>
		<style type="text/css">
			.content{
				width: 100%;
				background-color: #F2F2F2;
				padding: 10px;
			}
			.search{
				display: flex;
				justify-content: center;
				align-content: center;
				padding: 10px;
				background-color: white;
			}
			.simg{
				width: 30px;
				height: 30px;
			}
			.simg>img{
				width: 100%;
				height: 100%;
			}
			.ssdiv{
				width: 75%;
			}
			.ssinp{
				width: 100%;
				height: 100%;
				border: 0;
				padding-left: 20px;
			}
			
			.context{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: flex-start;
				height: calc(100% - 70px);
			}
			.tleft{
				width: 25%;
			}
			.tright{
				width: 75%;
				
				height: 100%
			}
			.tmain{
				width: 100%;
				height: 100%;
			}
			.tleft>div{
				width: 100%;
				height: 2.5em;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.bgw{
				background-color: white;
			}
			.goodsdiv{
				width: 100%;
				padding: 0.2em;
				height: auto;
				border-bottom: 1px solid #ACACB4;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			
			.topdiv{
				width: 80%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.botdiv{
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
			.toptext{
				width: 60%;
				display: flex;
				align-items: flex-start;
				justify-content: center;
				flex-direction: column;
				padding-left: 0.5em;
			}
			.topimg{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 25%;
				height: auto;
				padding-left: 0.5em;
			}
			.topimg>img{
				border-radius: 50%;
				width: 100%;
				height: 100%;
			}
			.qian{
				width: 50%;
			}
			.textdiv{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 2px;
			}
			.mui-checkbox input[type=checkbox], .mui-radio input[type=radio] {
			    position: absolute;
			    top: 0px;
			    right: 20px;
			    display: inline-block;
			    width: 28px;
			    height: 26px;
			    border: 0;
			    outline: 0!important;
			    background-color: transparent;
			    -webkit-appearance: none;
			}
			.stockinput{
				width: 100%;
			}
			
			input[type=number]{
				margin-bottom: 0px;
			}
		</style>
	</head>



	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title" id="herderid">库存盘点</h1>
		    <div class="hicon mui-icon-right-nav mui-pull-right" id="adddiv">
		    	<!--
                	作者：592176224@qq.com
                	时间：2019-03-19
                	描述：
		    	<img src="../img/add.png"/>
                -->
		    </div>
		</header>
		<div  id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
		    <div class="content">
		    	<div class="" id="gather">
		    		
		    	</div>
		    	<div class="search">
		    		<div class="simg">
		    			<img src="../img/ss-img2.png"/>
		    		</div>
		    		<div class="ssdiv">
		    			<form action="" onkeydown="if(event.keyCode==13)return false;">
							<input id="keyvalue" class="ssinp" placeholder="请输入产品条码或名称" />
						</form>
						<!--
                        	作者：592176224@qq.com
                        	时间：2019-03-19
                        	描述：
		    			<input class="ssinp" type="" name="" id="" value=""  placeholder="请输入编码或名称"/>
                        -->
		    		
		    		</div>
		    		<div class="simg">
		    			<img id="goscann" src="../img/saomiao.png"/>
		    		</div>
		    	</div>
		    </div>
		    <div class="context">
		    	<div class="tleft" id="selectdiv">
		    		<!--
                    	作者：592176224@qq.com
                    	时间：2019-01-14
                    	描述：
		    		<div class="bgw"  href="#" id="1">
		    			所有商品
		    		</div>
		    		<div class="" href="#" id="1">
		    			1个商品
		    		</div>
		    		<div class="" id="2" href="#">
		    			2个商品
		    		</div>
                    -->
		    	</div>
		    	<div class="tright bgw">
		    		<div class="tmain" id="tmain">
		    			
		    			
                      <!--
                      	作者：592176224@qq.com
                      	时间：2019-02-22
                      	描述：
                      
                        <div class="goodsdiv">
                        	<div class="topdiv">
                        		<div class="topimg">
	    							<img src="../images/books_bg.png"/>
	    						</div>
		    					<div class="toptext">
		    						<div class="textdiv">
		    							<span class="fe09">
			    							商品
			    						</span>	
			    						<span class="fe05">￥100</span>
		    						</div>
		    						<div class="textdiv">
		    							<span class="fe05">库存：100</span>
		    						</div>
					    			<div class="">
					    				<div class="mui-numbox" data-numbox-step="1" data-numbox-min="0" data-numbox-max="100">
								        <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
								        <input class="mui-input-numbox" id="num" type="number" />
								        <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
					    			</div>
					    			</div>
		    					</div>
                        	</div>
                        	<div class="mui-input-row mui-checkbox ">
			    			    <label></label>
			    			    <input name="Checkbox" type="checkbox" checked>
			    			</div>
                        </div>
                        -->
                        
		    			
		    		</div>
		    		<div class="morediv hidden" id="moreid">
				   		<span id="more_list">更多</span>
				   	</div>
				   	<div class="footgd"></div>
		    	</div>
		    </div>
		</div>
		<div class="footdiv">
		    	<div class="fleft">
		    		<!--
                    	作者：592176224@qq.com
                    	时间：2019-01-30
                    	描述：
		    		<div class="fimg">
		    			<img src="../img/gwc.png"/>
		    		</div>
                    -->
		    		<div class="" id="moneyid">
		    			
		    		</div>
		    	</div>
		    	<div class="fright" id="subut">
		    		确认盘点
		    	</div>
		    </div>
		</div>
		
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var c = null;
			(function(){
				var cashier = function(){};
				$.extend(cashier.prototype, {
					sort_id:0,	//默认商品分类id  0位全部
					pagenums:1,	//分页
					tarnum:0,	//商品分类id
					glist:[],	//商品数组
					typenum:1,	//页面类型  1入库 ，2 出库 ，3 调拨
					plist:[],	//需要的参数数组
					glist:[],
					onReady:function(){
						var that = this;
						mui.init({
								 pullRefresh: {
							        container: '#refreshContainer',
							        down: {
							        	height:50,//可选,默认50.触发下拉刷新拖动距离,
								      	auto: false,//可选,默认false.首次加载自动下拉刷新一次
								     	contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
								      	contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
								      	contentrefresh : "正在刷新...",
							            callback: pulldownRefresh
							        },
							        up:{
							        	
							        	callback: pullupRefresh
							        }
							    }
							});
				function pullupRefresh(){
					that.more_list();
					mui('#refreshContainer').pullRefresh().endPullupToRefresh();
				}
				function pulldownRefresh(){
					that.pagenums = 1;
		      		that.glist = [];
		      		that.getsortlist();
		      		mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
		      		mui('#refreshContainer').pullRefresh().refresh(true);
				}
						mui.plusReady(function(){
							var view = plus.webview.currentWebview();
							
					 		that.typenum = view.type;
						})
						//更多
						g("more_list").addEventListener("tap",function(){
							that.more_list();
						})
						that.setfunction();
						//mui('.mui-scroll-wrapper').scroll();
					},
					//更多
					more_list:function(){
						var that = this;
						that.pagenums++;
						that.getsortlist();
					},
					setfunction:function(){
						var that = this;
						$('#selectdiv').on('tap', 'div', function(e) {
		                	var targettab = this.getAttribute('id');
		               	 	console.log(targettab);
			                that.tarnum = targettab;
			                var targetclass = this.getAttribute('class');
				                if(targetclass == ""&&targettab != "addproduct"){
				                	$(this).addClass('bgw').siblings().removeClass('bgw');
				                	that.glist = [];
				                	that.pagenums= 1;
				                	that.getsortlist(targettab);
				                }else{
				                	
				                }
		           	 	});
		           	 	
		           	 	//扫码
		           	 	g("goscann").addEventListener("tap",function(e){
							var list = {
		                         pageid:"stock-taking",
		                         returnfun:"setcard_number"
		            		}
		                    mui.openWindow({
		                        url: '../general/scanning-page.html',
		                        id: 'scanning-page',
		                        extras: list,
		                        show: {
		                            aniShow: 'zoom-fade-in',
		                            duration: 300
		                        },
		                        waiting: {
		                            autoShow: true
		                        }
		                });
							
						})
		           	 	
						$('#subut').on('tap',function(e) {
							mui.confirm("确认盘点数量？","",["取消","确认"],function(e){
								if(e.index  == 1){
									console.log("确认盘点");
									var plist = that.plist;
									console.log(plist)
									var product = [];
									for(var i = 0; i < plist.length; i++){
										var str = {
											product_id:plist[i].pid,
											count:plist[i].count,
											price:0
										}
										product.push(str)
										
									}
									var data = {
										url:"/api/product/inventory",
										data:{
											access_token:acctoken(),
											product:product
										}
									}
									
									ajax(data,function(res){
										
										console.log(res);
										mui.toast(res.msg);
										//that.getgather();
										that.getsortlist();
									})
								}
								
							})
							
							
							
		           	 	});
		           	 	
		           	 	$("body").on("input propertychange",".stockinput",function(e){
							var plist = that.plist;
							var val = this.value;
							console.log(val);
							var pid = $(this).data("pid");
							console.log("pid",pid)
							plist.forEach(function(item,index){
								if(pid == item.pid){
									plist[index].count = parseInt(val);
								}
							})
							//console.log(plist);
							that.plist = plist;
						})
		           	 	
		           	 	$("body").on("change","input[type=checkbox]",function(e){
							var plist = that.plist;
							if(this.checked){
								var list = {
									pid:$(this).data("pid"),
									price:$(this).data("price"),
									pstock:$(this).data("pstock"),
									buy_price:$(this).data("buy_price"),
									count:parseInt($(this).parent().prev().find(".stockinput").val())||0,
								}
								plist.push(list);
								that.plist = plist;
							}else{
								for (var i = 0; i < plist.length; i++) {
									if (plist[i].pid == $(this).data("pid")) {
										plist.splice(i, 1);
									}
								}
								that.plist = plist;
							}
							that.setgoodsnum();
							
						})
		           	 	//that.getgather();
						that.getproduct();
						that.getsortlist();
					},
					//获取商品库存等信息
					getgather:function(){
						var data = {
							url:"/api/product/gather",
							data:{
								access_token:acctoken(),
							}
						}
						ajax(data,function(res){
							console.log("商品库存信息",res);
							g("gather").innerHTML = '<p >合计：'+
							res.data.count+' \t 总库存：'+
							res.data.stock+' \t 总成本：'+
							res.data.buy_price+'</p>';
						})
						
					},
					
					//设置盘点商品数
					setgoodsnum:function(){
						var that = this;
						var plist = that.plist;
						
						g("moneyid").innerHTML = "盘点商品数:"+plist.length+"个";
					},
					//根据商品分类获取商品列表
					getsortlist:function(sid){
						var that = this;
							var data = {
								url:"/api/product/list_sort",
								data:{
									access_token:acctoken(),
									sort_id:that.tarnum,
									type:1,
									page:that.pagenums,
									key:g("keyvalue").value||""
								}
							}
							ajax(data,function(res){
									
							console.log("商品数据",res);
							var list = res.data.data;
								if(list.length > 0){
									list.forEach(function(item,index){
										that.glist.push(item);
									})
									that.glist = remove_duplicate(that.glist);
									that.setsortlist(that.glist);
									$("#moreid").removeClass("hidden");
									if(list.length < res.data.per_page){
										$("#moreid").addClass("hidden");
									}
								}else{
									if(that.pagenums == 1){
										var str = '<div class="nolistdiv">暂无记录<div>';
										g("tmain").innerHTML = str;
										$("#moreid").addClass("hidden");
									}else{
										that.pagenums--
										$("#moreid").addClass("hidden");
										mui.toast('没有更多数据了');
									}
								}
								
							})
					},
					setsortlist:function(data){
						var that = this;
						var str = "";
						for(var i = 0; i < data.length; i++){
				    		str += '<div class="goodsdiv"><div class="topdiv"><div class="topimg">';
	    				if(data[i].product_images && data[i].product_images.path_name){
	    					str += '<img src="'+data[i].product_images.path_name+'"/>';
	    				}else{
	    					str += '<img src="../img/noimg.png"/>';
	    				}
	    				str += '</div><div class="toptext"><div class="textdiv"><span class="">'+
		    			data[i].product_name +
		    			'</span><span class="">￥'+
		    			data[i].buy_price +
		    			'</span></div><div class="textdiv"><span class="">当前库存：'+
		    			data[i].stock +
		    			'</span></div>'+
		    			'<div class="">'+
		    			'<input class="stockinput" data-pid="'+data[i].id+'" placeholder="盘点数量" type="number" id="" value="" />'+
		    			'</div></div></div>'+
		    			'<div class="mui-input-row mui-checkbox ">'+
			    		'<label></label>'+
			    		'<input name="Checkbox" data-pid="'+data[i].id+'" data-pimg="'+data[i].images+'" '+
			    		'data-pname="'+data[i].product_name+'" data-price="'+data[i].retail_price+'" '+
			    		'data-pstock="'+data[i].stock+'" data-buy_price="'+data[i].buy_price+'" type="checkbox">'+
			    		'</div></div>';
						}
						g("tmain").innerHTML = str;
					},
					unique:function(arr){
					　　var res =[];
					　　var json = {};
					　　for(var i=0;i<arr.length;i++){
					　　　　if(!json[arr[i]]){
					　　　　　　res.push(arr[i]);
					　　　　　　json[arr[i]] = i;
					　　　　}
					　　}
					　　return res;
					},
					
					
					getproduct:function(){
						var that = this;
						var data = {
							url:"/api/product_sort/lst",
							data:{
								access_token:acctoken()
								}
						}
						ajax(data,function(res){
							//console.log("获取商品类型",res)
							var str = '<div class="bgw" id="0">所有商品</div>';
							for(var i = 0; i < res.data.length; i++){
								str += '<div class="" id="'+res.data[i].id+'" onclick="">'+
						    			res.data[i].name+
						    			'</div>';
							}
							g("selectdiv").innerHTML = str;
							that.glist = [];
						});
					}
					
				});
				
				c = new cashier();
				
				c.onReady();
				document.onkeydown = function(event) {
					var e = event || window.event || arguments.callee.caller.arguments[0];
					if(e && e.keyCode == 13) {
						c.getsortlist();
					}
				}
				
				
			})()
			
			//扫码页面调用
			function setcard_number(scan){
				console.log("回调")
				g("keyvalue").value = scan;
				c.glist = [];
				c.getsortlist();
				
			}
			
		</script>
		
	</body>

</html>